<template>
	<view class="balance">
		<view class="content">
			<!-- 头部 -->
			<view class="header">
				<view class="minle">
					<view class="right">
							<view class="txt">DD 列表订单</view>
					</view>
				</view>
			</view>
			<!-- 明细 -->
			<view class="detail">
				<!-- 空数据 -->
				<view class="empty" v-if="data.detailsList.length==0">
					<empty></empty>
				</view>
				<!-- 有钱包明细 -->
				<view class="moneys" v-else>
					<scroll-view style="height: 100%;" scroll-y @scrolltolower='scrolltolower'>
						<view class="moneysFor" v-for="(item,index) in data.detailsList" :key="index">
							<view class="information">
								<view v-if="item.order">
										<view class="text" v-for="(it,i) in  item.order.split(',')">
										{{it}}
										</view>
								</view>
								<view v-else>暂无订单</view>
								<view class="source">
									<!-- v-if="item.source.username" -->
									<!-- {{item.source.username}} -->
								
								</view>
								<text class="date">{{$clearTime(item.CreatedAt)}}</text>
							</view>
							<view class="moneyl">
								<text>剩余:{{$toFiexd(item.money,2)}}</text>
								<view>总数:{{$toFiexd(item.total_money,2)}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 底部提现，充值 -->
			<!-- 			<view class="way">
				<text class="withdrawal" @click="$goURl('/pages/personal/wallet/withdrawal')">提现</text>
				<text class="recharge" @click="$goURl('/pages/personal/wallet/recharge')">转账</text>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const {
		appContext
	} = getCurrentInstance();
	const data = reactive({
		page: 0,
		pages: 1,
		size: 20,
		wallet_type: '', //钱包类型
		detailsList: [], //明细
		userInfo: {}, //用户信息
		walletList: {}, //钱包名称列表
		linestate:0,
	})
	onLoad((option) => {
		console.log('页面onLoad')
	})
	onShow(() => {
		data.userInfo = uni.getStorageSync('userInfo')
		console.log('页面onShow')
		data.page = 0
		data.pages = 1
		data.detailsList = []
		records()
		data.walletList = uni.getStorageSync('wallet')
	})
	
	function records() {
			data.page++
			appContext.config.globalProperties.$request({
				url: `api/fcList/?page=${data.page}&size=${data.size}`,
				method: 'GET',
				success(res) {
					console.log(res,"Res")
				data.detailsList = res.data.data
					if (data.pages) {
						if (data.page == data.pages) {
							data.loadmore = "nomore"
						} else {
							data.loadmore = "loading"
						}
					} else {
						data.loadmore = "nomore"
					}
				}
			})
	}
	//滑动到底部/做上拉加载
	const scrolltolower=()=> {
		if (data.detailsList.length>=20) {
					records()
		}
	}
	// onReachBottom(()=>{
	// 	console.log('onReachBottom')
	// })
</script>

<style scoped lang="scss">
	page{
		background-color: #F3F6FD;
	}
	.content {
		width: 100%;

		.header {
			width: 100%;
			height:220rpx;
			// background: url('http://pubuimg.cqguanjie.cn/chat/16948574023287');
			// background-repeat: round;
			background-color: $color4;
			display: flex;
			flex-direction: column;

			.minle {
				margin: 40px;
				display: flex;
				flex-direction: column;
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
						.money {
							margin-bottom: 10px;
							font-size: 32px;
							color: #fff;
							font-weight: 700;
						}
						.txt{
							color: #fff;
							font-size: 18px;
						}
				}
				

				.text {
					color: #f6f6f6;
					font-size: 14px;
				}
			}

		}

		.detail {
			width: 94%;
			background-color: #fff;
			margin: -40px auto 0 auto;
			padding: 20px 0;
			border-radius: 10px;

			.detailHder {
				padding-bottom: 20rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				.btn{
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: bold;
					margin-right: 30rpx;
				}
				image {
					width: 4px;
					height: 12px;
					margin: 0 4px 0 15px;
				}

				text {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #333333;
				}
			}

			.empty {}

			.moneys {
				width: 100%;
				height: 645px;

				.moneysFor {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid rgb(245, 245, 245);
					padding: 15px;

					.information {
						display: flex;
						flex-direction: column;

						.text {
							color: #333;
							font-weight: 700;
							font-size: 13px;
						}

						.source {
							text {
								color: rgb(153, 153, 153);
								font-size: 14px;
							}
						}

						.date {
							color: rgb(153, 153, 153);
							font-size: 14px;
						}
					}

					.moneyl {
						text {
							color: #f4391c;
							font-size: 16px;
							font-weight: 700;
						}

						view {
							font-size: 12px;
							color: #999;
						}
					}
				}
			}
		}

		.way {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			text-align: center;
			display: flex;
			border-top: 1px solid #ccc;

			.withdrawal {
				width: 50%;
				background-color: #fff;
				display: block;
				padding: 30upx 0;
				font-size: 36rpx;
				color: #333333;
				font-weight: 700;
			}

			.recharge {
				width: 50%;
				display: block;
				padding: 30upx 0;
				color: #ffffff;
				font-weight: 700;
				font-size: 36rpx;
				background: linear-gradient(90deg, #ff1b4c, #e80001);
			}
		}
	}
</style>